/*
 * 商家编辑
 * @Author: ljb
 * @Date: 2018-03-27 17:53:27
 * @Last Modified by: ljb
 * @Last Modified time: 2018-10-19 16:29:10
 */
<style lang="less" rel="stylesheet/less" type="text/less">
	.v-admin-customer-edit {
		max-width: 450px;
	}
</style>
<template>
	<div class="v-admin-customer-edit">
		<Form
			ref="formValidate"
			:model="formValidate"
			:rules="ruleValidate"
			:label-width="labelWidth(100, 160)"
			name="edit-form">
			<!-- 用户信息更新列表 -->
			<Form-item
				:label="$t('customer.wechat_id')"
				prop="authorizer_id">
				<Row>
					<i-col span="22">
						<Select
							v-if="parseInt(formValidate.authorizer_id) !== 0"
							v-model="formValidate.authorizer_id"
							name="edit-authorizer_id"
							clearable
							filterable>
							<Option
								v-for="authorizer in authorizers"
								:value="authorizer.id + ''"
								:key="authorizer.id">{{ authorizer.nick_name }}</Option>
						</Select>

						<Select
							v-else
							v-model="formValidate.authorizer_id"
							name="edit-authorizer_id"
							clearable
							filterable>
							<Option
								value=""
								selected
								hidden
								disabled/>
							<Option
								v-for="authorizer in authorizers"
								:value="authorizer.id + ''"
								:key="authorizer.id">{{ authorizer.nick_name }}</Option>
						</Select>
					</i-col>
					<i-col
						span="1"
						offset="1">
						<Tooltip
							:content="$t('customer.auth_tip')"
							placement="right">
							<a
								href="//mirror.xiaojingxiuxiu.com/open-wechat/pre-auth-url"
								target="_blank"
								class="help">
								<Icon
									type="help-circled"
									size="20"/>
							</a>
						</Tooltip>
					</i-col>
				</Row>
			</Form-item>

			<Form-item
				:label="$t('customer.category')"
				prop="operate_category">
				<Row>
					<i-col span="22">
						<Select
							v-model="formValidate.operate_category"
							name="edit-operate_category"
							multiple
							clearable
							filterable
							transfer>
							<Option
								v-for="category in categories"
								:value="category.id + ''"
								:key="category.id + ''">{{ category.name }}</Option>
						</Select>
					</i-col>
					<i-col
						span="1"
						offset="1">
						<Button
							type="primary"
							@click="selectAll">{{ !select_all ? this.$t('common.select_all') : this.$t('common.cancel') }}</Button>
					</i-col>
				</Row>
			</Form-item>
			<Form-item
				:label="$t('customer.name')"
				prop="name">
				<i-input
					v-model="formValidate.name"
					:placeholder="$t('customer.please_enter_name')"
					name="edit-name"
					type="text"/>
			</Form-item>

			<Form-item
				:label="$t('customer.legal_person')"
				prop="legal_person">
				<i-input
					v-model="formValidate.legal_person"
					:placeholder="$t('customer.please_enter_person')"
					name="edit-legal_person"
					type="text"/>
			</Form-item>

			<Form-item
				:label="$t('customer.telephone')"
				prop="telephone">
				<i-input
					v-model="formValidate.telephone"
					:placeholder="$t('customer.please_enter_tel')"
					name="edit-telephone"
					type="text"/>
			</Form-item>

			<Form-item
				:label="$t('customer.contacts')"
				prop="contacts">
				<i-input
					v-model="formValidate.contacts"
					:placeholder="$t('customer.please_enter_contacts')"
					name="edit-contacts"
					type="text"/>
			</Form-item>

			<Form-item
				:label="$t('customer.telephone')"
				prop="phone">
				<i-input
					v-model="formValidate.phone"
					:placeholder="$t('customer.please_enter_tel')"
					name="edit-phone"
					type="text"/>
			</Form-item>

			<Form-item
				:label="$t('customer.license')"
				prop="license">
				<Uploader
					ref="license"
					:default.sync="license_src"
					@on-remove="(file)=>{handleRemove('license',file)}"
					@on-change="(file)=>{handleChange('license',file)}">
					{{ $t('common.pic_tip') }}
				</Uploader>
			</Form-item>

			<Form-item
				:label="$t('customer.water_mark')"
				prop="water_mark">
				<Uploader
					ref="water_mark"
					:default.sync="water_mark_src"
					@on-remove="(file)=>{handleRemove('water_mark',file)}"
					@on-change="(file)=>{handleChange('water_mark',file)}">
					{{ $t('common.pic_tip') }}
				</Uploader>
			</Form-item>

			<Form-item
				v-if="$i18n.locale === 'zh-CN'"
				:label="$t('customer.area')"
				prop="resArr">
				<areaSelector
					v-model="formValidate.resArr"
					:gutter="0"
					name="edit-resArr"
					searchable
					data-type="name"
					auto
					level="2"/>
			</Form-item>

			<Form-item
				:label="$t('customer.address')"
				prop="address">
				<i-input
					v-model="formValidate.address"
					:placeholder="$t('customer.please_enter_address')"
					name="edit-address"
					type="text"/>
			</Form-item>

			<Form-item
				:label="$t('customer.provider_type')"
				prop="provider_type"
				class="selectBox">
				<RadioGroup
					v-model="formValidate.provider_type"
					name="edit-provider_type">
					<Radio label="2">
						<span>{{ $t('customer.general_customer') }}</span>
					</Radio>
					<Radio label="1">
						<span>{{ $t('customer.virtual_provider') }}</span>
					</Radio>
					<!-- <Radio label="3">
						<span>{{ $t('customer.bought_software_customer') }}</span>
					</Radio> -->
				</RadioGroup>
			</Form-item>

			<!-- <Form-item
				v-if="String(formValidate.provider_type) === '3'"
				:label="$t('customer.dev_acnt_num')"
				prop="dev_acnt_num">
				<InputNumber
					:min="0"
					v-model="formValidate.dev_acnt_num"
					:placeholder="$t('customer.please_enter_account')"
					name="edit-dev_acnt_num"/>
			</Form-item> -->

			<!-- <Form-item
				v-if="String(formValidate.provider_type) !== '1'"
				:label="$t('customer.show_virtual')"
				prop="show_virtual"
				class="selectBox">
				<i-switch
					v-model="formValidate.show_virtual"
					true-value="1"
					false-value="0"
					name="edit-show_virtual">
					<Icon
						slot="open"
						type="android-done"/>
					<Icon
						slot="close"
						type="android-close"/>
				</i-switch>
			</Form-item> -->

			<Form-item
				v-if="String(formValidate.provider_type) !== '1'"
				:label="$t('customer.has_youzan')"
				prop="has_youzan">

				<i-switch
					v-model="formValidate.has_youzan"
					true-value="1"
					false-value="0"
					name="edit-has_youzan">
					<Icon
						slot="open"
						type="android-done"/>
					<Icon
						slot="close"
						type="android-close"/>
				</i-switch>
			</Form-item>

			<!-- <Form-item
				v-if="Number(formValidate.has_youzan) !== 0"
				:label="$t('customer.youzan_store')"
				prop="youzan_authorizer_id">
				<Select
					v-model="formValidate.youzan_authorizer_id"
					clearable
					filterable>
					<Option
						v-for="( authorizer , key ) in youzanAuthorizers"
						:value="String(authorizer.id)"
						:key="key">{{ authorizer.youzan_store_name }}</Option>
				</Select>
			</Form-item> -->

			<Form-item
				:label="$t('customer.is_debug')"
				prop="is_debug">
				<i-switch
					v-model="formValidate.is_debug"
					true-value="1"
					false-value="0"
					name="edit-is_debug">
					<Icon
						slot="open"
						type="android-done"/>
					<Icon
						slot="close"
						type="android-close"/>
				</i-switch>
			</Form-item>

			<Form-item>
				<Button
					type="primary"
					@click="updateCustomer('formValidate')">
					{{ $t('common.update') }}
				</Button>
			</Form-item>

		</Form>
	</div>
</template>

<script>

import { validatePhone } from 'src/validate'; // 引入校验文件
import labelWidthMixin from 'src/views/mixins/labelWidthMixin'; // 引入mixins文件
import areaSelector from 'src/views/component/area-selector';
import Uploader from 'src/views/component/Uploader';

export default {

	name: 'AdminCustomerEdit',

	components: {
		areaSelector,
		Uploader,
	},

	mixins: [labelWidthMixin],

	props: {
		customerDetail: {
			type: Object,
			default() {
				return {};
			},
		},
		showModal: {
			type: Boolean,
			default() {
				return false;
			},
		},
		authorizers: {
			type: Array,
			default() {
				return [];
			},
		},
		categories: {
			type: Array,
			default() {
				return [];
			},
		},
		youzanAuthorizers: {
			type: Array,
			default() {
				return [];
			},
		},
	},
	data() {
		return {
			formValidate: {
				_method: 'PUT',

				authorizer_id: '',

				name: '', // 客户姓名

				legal_person: '', // 公司法人

				telephone: '', // 公司电话

				contacts: '', // 联系人

				phone: '', // 联系人电话

				license: null, // 营业执照

				water_mark: null, // 水印图片

				resArr: [],

				address: '', // 地址

				provider_type: '', // 代理商户类型

				show_virtual: '', // 是否显示虚拟仓

				operate_category: [], // 产品分类数组

				is_debug: '', // 是否开通发型试戴

				dev_acnt_num: 0, // 购买软件客户设备账号开通的个数

				has_youzan: '0',		// 是否开通有赞
			}, // 更新客户时的表单

			ruleValidate: { // 验证表单数据规则
				authorizer_id: [
					{
						required: false,
						message: this.$t('validate.required', { field: this.$t('customer.wechat_id') }),
						trigger: 'blur,change',
					},
				],
				name: [
					{
						required: true,
						message: this.$t('validate.required', { field: this.$t('customer.name') }),
						trigger: 'blur,change',
					},
				],
				account: [
					{
						required: true,
						message: this.$t('validate.required', { field: this.$t('customer.account') }),
						trigger: 'blur,change',
					},
				],
				password: [
					{
						type: 'string',
						min: 6,
						message: this.$t('validate.min', { min: 6, field: this.$t('customer.password') }),
						trigger: 'blur,change',
					},
				],
				operate_category: [
					{
						required: true,
						type: 'array',
						message: this.$t('validate.required', { field: this.$t('customer.category') }),
						trigger: 'blur,change',
					},
				],
				email: [
					{
						required: true,
						message: this.$t('validate.required', { field: this.$t('customer.email') }),
						trigger: 'blur,change',
					},
					{
						type: 'email',
						message: this.$t('validate.email', { field: this.$t('customer.email') }),
						trigger: 'blur,change',
					},
				],
				legal_person: [
					{
						required: true,
						message: this.$t('validate.required', { field: this.$t('customer.legal_person') }),
						trigger: 'blur,change',
					},
				],
				telephone: [
					{
						required: true, validator: validatePhone, trigger: 'blur,change', validateType: 'create',
					},
				],
				phone: [
					{
						required: true, validator: validatePhone, trigger: 'blur,change', validateType: 'create',
					},
				],
				contacts: [
					{
						required: true,
						message: this.$t('validate.required', { field: this.$t('customer.contacts') }),
						trigger: 'blur,change',
					},
				],
				resArr: [
					{
						required: false,
						type: 'array',
						message: this.$t('validate.required', { field: this.$t('customer.area') }),
						trigger: 'blur,change',
					},
				],
				address: [
					{
						required: true,
						message: this.$t('validate.required', { field: this.$t('customer.address') }),
						trigger: 'blur,change',
					},
				],
				license: [
					// { validator: validateImage, trigger: 'blur,change' },
				],
				provider_type: [
					{
						required: true,
						message: this.$t('validate.required', { field: this.$t('customer.provider_type') }),
						trigger: 'blur,change',
					},
				],
				is_debug: [
					{
						required: true,
						message: this.$t('validate.required', { field: this.$t('customer.has_hair') }),
						trigger: 'blur,change',
					},
				],
				dev_acnt_num: [
					{
						required: true,
						type: 'number',
						message: this.$t('validate.required', { field: this.$t('customer.dev_acnt_num') }),
						trigger: 'blur,change',
					},
				],
				has_youzan: [
					{
						// required: true,
						message: this.$t('validate.required', { field: this.$t('customer.has_youzan') }),
						trigger: 'blur,change',
					},
				],
			},

			select_all: false,	// 选择全部
			license_src: '', // 证件图片
			water_mark_src: '', // 水印图片

		};
	},

	created() {
		this.initFormData();
	},

	methods: {
		initFormData() {
			if (this.customerDetail && Object.keys(this.customerDetail).length > 0) {
				this.formValidate.authorizer_id = String(this.customerDetail.authorizer_id);

				this.formValidate.name = this.customerDetail.name;

				this.formValidate.legal_person = this.customerDetail.legal_person;

				this.formValidate.telephone = this.customerDetail.telephone;

				this.formValidate.contacts = this.customerDetail.contacts;

				this.formValidate.phone = this.customerDetail.phone;

				/* 给省市区赋值 */
				if (this.customerDetail.province) {
					this.formValidate.resArr = [this.customerDetail.province, this.customerDetail.city, this.customerDetail.district];
				} else {
					this.formValidate.resArr = [];
				}
				/* END */

				this.formValidate.address = this.customerDetail.address;

				this.formValidate.provider_type = String(this.customerDetail.provider_type);

				this.formValidate.show_virtual = String(this.customerDetail.show_virtual);

				this.formValidate.operate_category = this.customerDetail.categories.map(category => String(category.id));

				this.formValidate.is_debug = String(this.customerDetail.is_debug);

				this.formValidate.dev_acnt_num = this.customerDetail.dev_acnt_num;

				this.editor_pre_data = this.customerDetail.content;

				// 补充
				this.formValidate.has_youzan = String(this.customerDetail.has_youzan);
				// 图片
				this.license_src = this.customerDetail.license;
				this.water_mark_src = this.customerDetail.water_mark;
			}
		},

		/**
		 * 删除图片
		 * @param {String} field {icon}
		 * @return {undefined}
		 */
		handleRemove(field) {
			this.formValidate[field] = '';
			// this.$refs.formValidate.validateField(field);
		},

		/**
		 * 选择图片
		 * @param {Object} file {选择的文件对象集合}
		 * @param {String} field {icon}
		 * @return {undefined}
		 */
		handleChange(field, { file }) {
			this.formValidate[field] = file;
			// this.$refs.formValidate.validateField(field);
		},

		/**
		 * 选择全部
		 * @return {undefined}
		 */
		selectAll() {
			this.select_all = !this.select_all;
			if (this.select_all) {
				this.formValidate.operate_category = this.categories.map(categorie => String(categorie.id));
			} else {
				this.formValidate.operate_category = [];
			}
		},

		/**
         * 手动拼接表单数据
         * @return {Object} {拼接好的表单数据}
		 * @return {undefined}
         */
		formDataCreate() {
			const new_object = {
				_method: 'PUT',

				authorizer_id: this.formValidate.authorizer_id,

				name: this.formValidate.name,

				legal_person: this.formValidate.legal_person,

				telephone: this.formValidate.telephone,

				contacts: this.formValidate.contacts,

				phone: this.formValidate.phone,

				license: this.formValidate.license,

				province: this.formValidate.resArr[0] || '',

				city: this.formValidate.resArr[1] || '',

				district: this.formValidate.resArr[2] || '',

				address: this.formValidate.address,

				provider_type: this.formValidate.provider_type,

				show_virtual: this.formValidate.show_virtual,

				operate_category: this.formValidate.operate_category,

				is_debug: this.formValidate.is_debug,

				// dev_acnt_num: this.formValidate.dev_acnt_num,

				// 补充
				water_mark: this.formValidate.water_mark,

				has_youzan: this.formValidate.has_youzan,
			};

			const form_data = new FormData();

			Object.keys(new_object).forEach((key) => {
				switch (key) {
				case 'operate_category':

					new_object[key].forEach((category, index) => {
						form_data.append(`${key}[${index}]`, category);
					});

					break;

				default:
					if (!(typeof new_object[key] === 'object' && !new_object[key])) { // null 不提交
						form_data.append(key, new_object[key]);
					}

					break;
				}
			});

			return form_data;
		},

		/**
         * 更新客户信息
		 * @param {String} name {表单ref的值}
         * @return {undefined}
         */
		updateCustomer(name) {
			if (this.customerDetail.authorizer_id &&
				Number(this.formValidate.authorizer_id) !== Number(this.customerDetail.authorizer_id)) {
				this.$Modal.confirm({
					title: this.$t('customer.unbind_tip'),
					onOk: () => {
						this.validateData(name);
					},
					onCancel: () => {},
				});
			} else {
				this.validateData(name);
			}
		},

		/**
         * 校验数据
		 * @param {String} name {表单ref的值}
         * @return {undefined}
         */
		validateData(name) {
			this.$refs[name].validate((valid) => {
				if (valid) {
					this.$emit('update', this.customerDetail.id, this.formDataCreate());
				} else {
					this.$Message.error(this.$('common.invalid_form_data'));
				}
			});
		},

	},
};
</script>
